<template>
  <div id="pingZhongZuXintu" style="height: 100%"></div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts'
  import { COLOR_ARR } from '@/utils/constants'

  const props = defineProps({
    itemData: Object
  })

  watch(
    () => props.itemData,
    () => {
      nextTick(() => {
        handleSetVisitChart()
      })
    },
    { deep: true, immediate: true }
  )

  const myChart = ref()

  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('pingZhongZuXintu'))
    let option = {
      color: COLOR_ARR,
      title: {
        text: ' ',
        subtext: ''
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        top: 70,
        left: 50,
        right: 50,
        bottom: 5,
        containLabel: true
      },
      legend: {
        data: ['品种-平均生产效率', '品种-理论产量总和']
      },
      // toolbox: {
      //   show: true,
      //   feature: {
      //     dataView: { show: true, readOnly: false },
      //     magicType: { show: true, type: ["line", "bar"] },
      //     restore: { show: true },
      //     saveAsImage: { show: true },
      //   },
      // },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: props.itemData.pingZhongArr,
          axisLabel: {
            interval: 0, // 横轴信息全部显示
            rotate: -15, // 倾斜度 -90 至 90 默认为0
            margin: 10, // 刻度标签与轴线之间的距离
            textStyle: {
              color: '#000000' // 颜色
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '品种-平均生产效率',
          position: 'left',
          // axisLine: {
          //   lineStyle: {
          //     color: colors[2],
          //   },
          // },
          axisLabel: {
            formatter: '{value} °%'
          }
        },
        {
          type: 'value',
          name: '品种-理论产量总和',
          position: 'right',
          // axisLine: {
          //   lineStyle: {
          //     color: colors[0],
          //   },
          // },
          axisLabel: {
            formatter: '{value} kg'
          }
        }
      ],
      series: [
        {
          name: '品种-平均生产效率',
          type: 'bar',
          yAxisIndex: 0,
          data: props.itemData.xiaoLvgArr,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: '平均值' }]
          }
        },
        {
          name: '品种-理论产量总和',
          type: 'bar',
          yAxisIndex: 1,
          data: props.itemData.zhongLiangArr,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: '平均值' }]
          }
        }
      ]
    }
    myChart.value.setOption(option, true)
    window.addEventListener('resize', function () {
      myChart.value.resize()
    })
  }

  onUnmounted(() => {
    myChart.value.dispose()
  })
</script>

<style scoped></style>
